'use client'

import { Button, Result } from 'antd'
import { useEffect } from 'react'

export default function Error({ error, reset }) {
    useEffect(() => {
        // 在生产环境中，这里可以添加错误报告服务
        // 开发环境中避免console.error以防止无限递归
        if (error && process.env.NODE_ENV === 'production') {
            // 这里可以添加错误报告逻辑，比如发送到监控服务
            // reportError(error)
        }
    }, [error])

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
            <Result
                status="500"
                title="500"
                subTitle="抱歉，服务器出现了一些问题。请稍后重试。"
                extra={
                    <div className="space-x-4">
                        <Button
                            type="primary"
                            onClick={() => reset()}
                        >
                            重试
                        </Button>
                        <Button onClick={() => window.location.href = '/'}>
                            返回首页
                        </Button>
                    </div>
                }
            />
            {process.env.NODE_ENV === 'development' && (
                <div className="mt-8 p-4 bg-red-50 border border-red-200 rounded max-w-2xl">
                    <h3 className="text-red-700 font-medium mb-2">错误详情 (开发模式)</h3>
                    <pre className="text-sm text-red-600 whitespace-pre-wrap overflow-auto">
                        {error.message}
                        {error.stack && '\n\n' + error.stack}
                    </pre>
                </div>
            )}
        </div>
    )
}